<template>
  <div class="memberSpace">
    <div class="goodsBox">
      <div class="goods" v-for="(item,index) in list" :key="index">
        <div class="img">

          <van-image :src="`${resourceURL}${item.imageurl}`" fit="cover" />
        </div>
        <div class="right">
          <div class="top">
            <div class="name">{{item.product_name}}</div>
            <p>精选商品</p>
          </div>
          <div class="bottom">
            <div class="price">￥{{item.mprice}}</div>
            <van-button type="primary" round @click="jump(item)">抢购</van-button>
          </div>
        </div>
      </div>
      <van-empty description="暂无会员商品" v-if="list.length==0" />
    </div>

  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      loading: false,
      finished: true,
      page: 1,
      list: [],
    }
  },
  computed: {

  },
  watch: {

  },
  created () {
    this.productlist()
  },
  mounted () {

  },
  methods: {
    // 普通商品列表
    productlist () {
      this.loading = true
      this.$axios.get(this.$api.productlist, {
        params: {
          show: '3',
          page: this.page
        }
      }).then((res) => {
        this.loading = false


        if (res.data.code == 1) {
          if (res.data.data.length == 0) {
            this.finished = true
          } else {
            this.list = this.list.concat(res.data.data);
            this.finished = false

          }

        }


      })
    },
    jump (item) {
      this.$router.push({
        name: 'product',
        query: {
          id: item.product_id
        }
      })
    }
  }
};
</script>
<style lang='less' scoped>
.memberSpace {
  background: url('../../assets/img/home/memberSpaceBg.png') no-repeat;
  overflow: auto;
  background-size: contain;
  background-position: 100% 0%;
  min-height: 100vh;
  .goodsBox {
    margin-top: 195px;
    width: 375px;
    min-height: 529px;
    background: #f6f6f6;
    border-radius: 16px 16px 0px 0px;
    box-sizing: border-box;
    padding: 16px;
    padding-top: 16px;
    //border: 1px solid white;
    .goods {
      width: 343px;
      height: 114px;
      background: #ffffff;
      border-radius: 6px 6px 6px 6px;
      display: flex;
      margin-bottom: 12px;
      box-sizing: border-box;
      /deep/.van-image {
        width: 114px;
        height: 114px;
      }
      .right {
        margin: 12px;

        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        flex: 1;
        .name {
          font-size: 14px;
          font-weight: bold;
          color: #470607;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden; //溢出内容隐藏
          text-overflow: ellipsis; //文本溢出部分用省略号表示
          display: -webkit-box; //特别显示模式
          -webkit-line-clamp: 2; //行数
          line-clamp: 2;
          -webkit-box-orient: vertical; //盒子中内容竖直排列
        }
        p {
          margin: 0;
          margin-top: 6px;
          color: #202327;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .price {
            font-size: 16px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #fb2b2c;
          }
          button {
            width: 60px;
            height: 24px;
            background: #ff7733;
            font-size: 12px;
            white-space: nowrap;
            border-color: #ff7733;
          }
        }
      }
    }
  }
}
</style>